<template>
    <div class="tool-panel text-center" v-show="isShow">
        <ul class="tool-panel-list clearfix">
            <router-link to="/redPacket" tag="li" class="tool-panel-item">
                <div><i class="icon icon-red-envelopes"></i></div>
                <p>红包</p>
            </router-link>
            <li class="tool-panel-item">
                <div><i class="icon icon-picture"></i></div>
                <p>图片</p>
            </li>
            <li class="tool-panel-item" @click.stop="signInAction">
                <div><i class="icon icon-sign-in"></i></div>
                <p>签到</p>
            </li>
            <router-link to="/income" tag="li" class="tool-panel-item">
                <div><i class="icon icon-Cash-withdrawal"></i></div>
                <p>提现</p>
            </router-link>
            <li class="tool-panel-item" style="display: none;">
                <div><i class="icon icon-Cash-withdrawal"></i></div>
                <p>举报</p>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  components: {},
  props: ['isShow'],
  data() {
    return {
    };
  },
  computed: {},
  methods: {
      signInAction(){
        this.$emit('sign-action');
      }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';
.tool-panel {
  width: 100%;
  padding: 20px 0;
  bottom: 0;
  background-color: $color-white;
  .tool-panel-item{
    float: left;
    width: 25%;
    margin: 0 auto;

    // &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(4){
    //   margin-bottom: 18px;
    // }
  }

  div {
    display: flex;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid #eceded;
    align-items: center;
    justify-content: center;
    border-radius: 6px;

    .icon {
      font-size: 64px;
    }
  }
  p {
    font-size: 24px;
    line-height: 2;
    color: $color-dark-gray;
  }
}
</style>